<template>
  <div id="details">
    <div class="comment-mode" v-show="commentMode===1" @click="closeComment">
      <div class="comment-box" @click.stop="">
        <div class="comment-text">
          <textarea name="" id="" cols="30" rows="10" placeholder="留下你的精彩评论…" v-model="commentContent"
                    ref="commentContent"></textarea>
        </div>
        <div class="comment-image-button" v-show="Boolean(!commentImage)">
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="23" viewBox="0 0 28 23">
            <path class="a" style="fill:#3981ff"
                  d="M57.117,110.8H36.829a3.89,3.89,0,0,0-3.856,3.923v15.155a3.89,3.89,0,0,0,3.856,3.923H57.117a3.89,3.89,0,0,0,3.856-3.923V114.72A3.89,3.89,0,0,0,57.117,110.8Zm-16.244,5.028a2,2,0,1,1-1.963,2A1.98,1.98,0,0,1,40.872,115.825Zm18.156,10.742a.57.57,0,0,1-.81-.11l-4.326-5.812c-.012-.018-1.219-1.592-2.685-1.442-1.192.138-2.363,1.43-3.387,3.739-1.084,2.453-2.146,3.733-3.342,4.033-1.355.334-2.523-.6-3.76-1.6l-.157-.126c-1.448-1.154-2.14-.891-4.928,1.886a.567.567,0,0,1-.816-.009.6.6,0,0,1,.009-.833c2.532-2.523,4.079-3.861,6.448-1.969l.16.126c1.057.848,1.969,1.58,2.77,1.378s1.659-1.332,2.562-3.371c1.219-2.753,2.67-4.244,4.32-4.428,2.122-.23,3.667,1.816,3.73,1.9l4.32,5.806A.6.6,0,0,1,59.028,126.567Z"
                  transform="translate(-32.973 -110.797)"/>
          </svg>
          <input type="file" @change="addCommentImage($event)">
        </div>
        <div class="comment-image" v-show="Boolean(commentImage)">
          <div class="comment-image-close" @click="delCommentImage">
            <svg xmlns="http://www.w3.org/2000/svg" width="11.783" height="11.783" viewBox="0 0 11.783 11.783">
              <path class="a" style="fill:#fff"
                    d="M210.023,199.146l-4.985,4.985,4.985,4.985-.906.906-4.986-4.985-4.985,4.985-.906-.906,4.985-4.986-4.985-4.985.906-.906,4.985,4.985,4.985-4.985Z"
                    transform="translate(-198.24 -198.24)"/>
            </svg>
          </div>
          <img :src="commentImageUrl" alt="">
        </div>
        <button @click="handlePushComment">发送</button>
      </div>
    </div>
    <!--    <navigation userinfo=""></navigation>-->
    <navigation index="1" userinfo="https://cn.vuejs.org/images/logo.svg"></navigation>
    <div class="details" ref="details">
      <div class="details-header">
        <div class="details-header-problem">
          <div class="userinfo">
            <div class="user-image">
              <img :src="post.headImg" alt="">
            </div>
            <p class="username">{{ post.username }}</p>
            <div class="comment-button">
              <button @click="this.handleComment">
                <svg xmlns="http://www.w3.org/2000/svg" width="18.666" height="18.666" viewBox="0 0 18.666 18.666">
                  <path class="a" style="fill:#fff"
                        d="M94.666,85.333a9.333,9.333,0,1,1-4.793,17.342l-.439-.257-2.284.623a.7.7,0,0,1-.859-.86l.622-2.281c-.241-.409-.4-.683-.477-.829a9.336,9.336,0,0,1,8.23-13.738ZM92.43,97.359a.7.7,0,1,0-.9,1.077,4.9,4.9,0,0,0,6.261,0,.7.7,0,1,0-.895-1.077,3.5,3.5,0,0,1-4.471,0Z"
                        transform="translate(-85.333 -85.333)"/>
                </svg>
                <span>评论</span>
              </button>
            </div>
          </div>
          <div class="details-header-problem-text">
            <h1>{{ post.title }}</h1>
            <p>{{ post.content }}</p>
          </div>
          <div class="details-header-images" v-if="post.image">
            <img :src="post.image" alt="">
          </div>
          <div class="question-header-actions">
            <div class="question-header-heat">
              <svg xmlns="http://www.w3.org/2000/svg" width="19" height="27" viewBox="0 0 19 27">
                <path class="a" style="fill:#f64e54"
                      d="M201.519,91a9.5,9.5,0,0,1-8.831-5.947,9.362,9.362,0,0,1,2.322-10.332c1.7-1.586,5.875-4.442,5.242-10.721,7.6,5.023,11.4,10.047,3.8,17.581,1.267,0,3.167,0,6.334-3.1A9.169,9.169,0,0,1,201.519,91Z"
                      transform="translate(-192.019 -64)"/>
              </svg>
              <p>{{ post.hot }}</p>
            </div>
            <div class="question-header-commit">
              {{ post.createTime }}
            </div>
          </div>
        </div>
      </div>
      <div class="card" v-for="(item,index) in post.info">
        <div class="card-user">
          <div class="card-user-image" v-if="item.headImg">
            <img
                :src="item.headImg"
                alt="">
          </div>
          <div class="card-userinfo">
            <p class="card-username">{{ item.username }}</p>
            <p class="card-introduce">{{ item.createTime }}</p>
          </div>
        </div>
        <div class="card-content">
          <p>{{ item.content }}</p>
        </div>
        <div class="card-images" v-if="item.image">
          <img :src="item.image" alt="">
        </div>
        <div class="card-footer" @click="handleCommentUser(index)">
          <p>评论</p>
        </div>
        <div class="card-comments" style="display: none" ref="userComment">
          <div class="add-comment">
            <input type="text" placeholder="留下你精彩的评论吧…" ref="userCommentContent" v-model:value="userComments[index]">
            <button @click="userPushComment(index,item)">发送</button>
          </div>
          <div class="card-comment" v-if="item.comment != []" v-for="(item,index) in item.comment">
            <div class="comment-userinfo">
              <div class="comment-header">
                <img :src="item.headImg" alt="">
              </div>
              <div class="comment-username">{{ item.username }}</div>
            </div>
            <p class="comment-content">：{{ item.content }}</p>
            <div class="comment-time">{{ item.createTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <publicFooter></publicFooter>
  </div>
</template>

<script>
import navigation from "../../components/navigation";
import publicFooter from "../../components/publicFooter";
import axios from "axios";
import router from "../../router";

export default {
  name: "index",
  data() {
    return {
      commentMode: 0,
      commentContent: '',
      commentImage: '',
      commentImageUrl: '',
      post: {
        content: '',
        createTime: '',
        headImg: '',
        hot: '',
        image: '',
        title: '',
        username: '',
      },
      userComments: []
    }
  },
  mounted() {
    this.Request('get', '/v1/info', {
      id: sessionStorage.getItem('postId')
    }).then(res => {
      this.post = res.data
      for (let i = 0; i < this.post.info.length; i++) {
        this.userComments.push('')
      }
    })
  },
  methods: {
    handleComment: function () {
      this.$refs.details.style.position = 'fixed'
      this.commentMode = 1
    },
    closeComment: function () {
      this.$refs.details.style.position = 'static'
      this.commentContent = ''
      this.commentImage = ''
      this.commentImageUrl = ''
      this.commentMode = 0
    },
    addCommentImage: function (event) {
      this.commentImage = event.target.files
      let file = document.querySelector('input[type=file]').files[0];
      let reader = new FileReader();
      let _this = this
      reader.onload = function () {
        _this.commentImageUrl = reader.result
      }
      this.$refs.commentContent.style.width = '800px'
      if (file) {
        reader.readAsDataURL(file);
      }
    },
    delCommentImage: function () {
      this.commentImage = ''
      this.commentImageUrl = ''
      this.$refs.commentContent.style.width = '1258px'
    },
    handlePushComment: function () {
      const formData = new FormData()
      formData.append('content', this.commentContent)
      if (this.commentImage) {
        formData.append('img', this.commentImage[0])
      }
      formData.append('id', sessionStorage.getItem('postId'))

      //axios.defaults.baseURL = 'http://119.23.46.241:2203';
      const config = {
        headers: {"Content-Type": "multipart/form-data"}
      };
      axios.post("/v1/comment/posts", formData, config).then(res => {
        if (res.data.code == '200') {
          this.$refs.details.style.position = 'static'
          this.commentContent = ''
          this.commentMode = 0
          router.go(0)
        }
      });

    },
    handleCommentUser: function (index) {
      this.$refs.userComment[index].style.display = 'block'
    },
    userPushComment: function (index, item) {
      this.Request('post', '/v1/comment/info', {
        info: this.userComments[index],
        id: item.id
      }).then(res => {
        console.log(res);
        if (res.code == '200') {
              this.userComments[index] = ''
            }
            this.Request('get', '/v1/info', {
              id: sessionStorage.getItem('postId')
            }).then(res => {
              this.post = res.data
            })
          }
      )
    }
  },
  components: {
    navigation,
    publicFooter
  }
}
</script>

<style lang="less">
#details {
  .details {
    min-height: 700px;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .card:nth-last-child(1) {
    margin-bottom: 200px;
  }

  .details-header {
    background: #FFFFFF;
    box-shadow: 0 3px 6px rgba(138, 138, 138, 0.16);
  }

  .details-header-problem {
    width: 1200px;
    margin: 0 auto;
    padding: 34px 0 38px 22px;
  }

  .details-header .userinfo {
    display: grid;
    grid-template-columns: 70px auto 130px;
    padding: 0 41px 40px 0;
  }

  .details-header .user-image {
    border-radius: 5px;
    overflow: hidden;
  }

  .details-header .user-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .details-header .username {
    font-size: 30px;
    font-weight: 400;
    color: #333333;
    margin-left: 21px;
  }

  .details-header .comment-button button {
    width: 128px;
    height: 48px;
    background: #3981FF;
    box-shadow: 0 6px 8px #BBD2FA;
    border-radius: 24px;
    border: none;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .details-header-problem-text h1,
  .details-header-problem-text-text p {
    width: 875px;
  }

  .details-header-problem-text-problem-text h1 {
    font-weight: bold;
  }

  .details-header-problem-text p {
    margin: 18px 0;
    letter-spacing: 1px;
  }

  .details-header-images {
    width: 284px;
    height: 175px;
    border-radius: 5px;
    overflow: hidden;
  }

  .details-header-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .question-header-actions {
    margin: 0 auto;
    width: calc(1200px - 90px - 90px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 80px;
  }

  .question-header-actions > div {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 43px;
    color: #000000;
  }

  .card {
    width: 1200px;
    margin: 10px auto 0;
    padding: 30px 50px 28px 26px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(138, 138, 138, 0.16);
  }

  .card-user {
    display: flex;
    align-items: center;
  }

  .card-user-image {
    width: 41px;
    height: 41px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 15px;
  }

  .card-user-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card-userinfo p:first-child {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
  }

  .card-userinfo p:last-child {
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    opacity: 0.52;
  }

  .card-content {
    width: 928px;
    padding-top: 38px;
    font-size: 20px;
    line-height: 43px;
    color: #000000;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .card-images {
    margin-top: 16px;
    width: 470px;
    height: 306px;
    border-radius: 5px;
    overflow: hidden;
  }

  .card-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card-footer {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
  }

  .card-footer p {
    color: #FFFFFF;
    cursor: pointer;
    background: #3981FF;
    padding: 3px 20px;
    border-radius: 5px;
  }

  .comment-mode {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.18);
    z-index: 100;
  }

  .comment-box {
    width: 1300px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -80%);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.16);
    padding: 48px 78px 34px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px;
  }

  .comment-text {
    width: 1258px;
    background: #F3F4F5;
    border-radius: 5px;
  }

  .comment-box textarea {
    width: 1258px;
    height: 231px;
    border: none;
    resize: none;
    background: transparent;
    padding: 20px 22px;
    font-size: 20px;
    font-weight: 400;
    line-height: 43px;
    font-family: PingFang SC-Regular, PingFang SC;
  }

  .comment-image-button {
    position: absolute;
    top: 235px;
    right: 120px;
    cursor: pointer;
  }

  .comment-image-button input {
    width: 28px;
    height: 23px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  .comment-image {
    position: absolute;
    top: 76px;
    right: 107px;
    width: 284px;
    height: 175px;
    border: 1px solid #707070;
    border-radius: 5px;
    overflow: hidden;
  }

  .comment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .comment-image-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }


  .comment-box button {
    width: 182px;
    height: 60px;
    background: #3981FF;
    border: none;
    border-radius: 40px;
    font-size: 20px;
    font-weight: 400;
    line-height: 60px;
    text-align: center;
    color: #FFFFFF;
  }

  .add-comment {
    margin: 27px 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .add-comment input {
    width: 900px;
    height: 50px;
    text-indent: 20px;
    background: #F3F4F5;
    border-radius: 30px;
    border: none;
    font-size: 17px;
  }

  .add-comment button {
    width: 110px;
    height: 50px;
    background: #3981FF;
    border-radius: 30px;
    border: none;
    font-size: 17px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
    transform: translate(-50px);
  }

  .card-comment {
    margin: 10px auto;
    width: 1089px;
    height: 70px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 5px;
    cursor: pointer;
    padding: 27px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .comment-userinfo {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
  }

  .comment-header {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
  }

  .comment-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .comment-content {
    width: 755px;
  }

  .comment-time {
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
    color: #000000;
    letter-spacing: 1px;
    opacity: 0.5;
  }
}
</style>
